<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    form {
      width: 500px;
      padding: 20px;
      border: 5px solid pink;
      border-radius: 15px;
      margin: 50px auto;
    }

    label {
      font-size: 20px;
    }

    label > input {
      font-size: 20px;
      padding-left: 20px;
    }

    label > p {
      height: 30px;
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }

    label > p > span {
      width: 30%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ccc;
      color: #fff;
    }

    label > p > span:nth-child(1).active {
      background-color: red;
    }

    label > p > span:nth-child(2).active {
      background-color: orange;
    }

    label > p > span:nth-child(3).active {
      background-color: green;
    }
  </style>
</head>
<body>

  <form>
    <label>
      密码 : <input type="text">
      <p>
        <span>弱</span>
        <span>中</span>
        <span>强</span>
      </p>
    </label>
  </form>

  <script>
      //约定  如果 字母数字符号  
      // 只包含其中一种   弱 
      // 只包含其中2种    中
      // 包含三种         强
      // 我们不能通过一个正则 获取三种结果  test 要么true 要么false 
      // 捕获仅仅是捕获的结果  

      // 所以一个正则行不通 
    // 如果满足一个 一个if 符合要求  满足两个  2个if 满足要求  满足三个 3个if 都走进去
    // 走进去 还不是知道你是强 中 弱  
    // 我们需要拿到 结果 
    // 于是准备一个计数器   满足1 个 计数 1  2个 计数2  3 个计数 3   
      // if(){}
      // if(){}
      // if(){}

      // 如果亮 给span 添加class="active" 不亮  移除 class="active" 

      // 拿到用户输入的密码 也就是拿到输入框  
      var inp = document.querySelector('input');
      // 拿到所有 span元素让它亮 或者不亮  
      var spans =  document.querySelectorAll('p > span');

      var r1 = /\d/;
      var r2 = /[a-z]/i;
      var r3 = /[!@#$%_]/;


      // 边写边验证  每写一个 删除一个 触发事件 
      // input 
      inp.oninput = function(){
        //  console.log(this.value); 实时获取输入的结果 
        var text = this.value;

        // 为了知道级别  准备1个计数器
        var count = 0;
        if(r1.test(text)){ count++ }
        if(r2.test(text)){ count++ }
        if(r3.test(text)){ count++ }


        // console.log(count)
        // count ==0 没有任何亮  
        // count == 1 第一个span  spans[0] 亮
        // count == 2 第一个span 和第二个span亮 spans[0] 和 spans[1] 亮
       // count == 3 第一个span 和第二个span亮 第三个spans亮 spans[0] 和 spans[1] spans[2] 亮
        for(var i=0;i<spans.length;i++){
          spans[i].classList.remove('active');
          // 添加类名以前 移除所有的类名  跟选项卡差不多 
            if(i<count){

                // 始终是比计数器小的spans[i]亮
                // 给span[i]添加class="active"
                spans[i].classList.add('active')
            }

            
            
        }
       }
 </script>

 </body>

 </html>
 